<!DOCTYPE html>
<html>
<head>
<title>Pion Decay Diagram</title>
</head>
<body>

<canvas id="physicsDiagramCanvas" width="600" height="400"></canvas>

<script>
    const canvas = document.getElementById('physicsDiagramCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '24px "Times New Roman"';

    // Define key coordinates
    const yCenter = 180;
    const vertexX = 250;
    const vertexY = yCenter;

    // --- Draw Particle Paths ---
    ctx.lineWidth = 3;

    // 1. Incoming Pion (π+)
    ctx.beginPath();
    ctx.moveTo(40, yCenter);
    ctx.lineTo(vertexX, vertexY);
    ctx.stroke();

    // 2. Outgoing Muon (μ+)
    const muEndX = vertexX + 150;
    const muEndY = vertexY + 20;
    ctx.beginPath();
    ctx.moveTo(vertexX, vertexY);
    ctx.lineTo(muEndX, muEndY);
    ctx.stroke();

    // 3. Outgoing Neutrino (v)
    const nuEndX = vertexX + 150;
    const nuEndY = vertexY - 45;
    ctx.beginPath();
    ctx.moveTo(vertexX, vertexY);
    ctx.lineTo(nuEndX, nuEndY);
    ctx.stroke();

    // --- Draw Angle (θ) ---
    ctx.lineWidth = 2;

    // Dashed reference line
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(vertexX, vertexY);
    ctx.lineTo(vertexX + 100, vertexY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid lines

    // Angle arc
    const angleRadius = 50;
    const nuAngle = Math.atan2(nuEndY - vertexY, nuEndX - vertexX);
    ctx.beginPath();
    ctx.arc(vertexX, vertexY, angleRadius, nuAngle, 0);
    ctx.stroke();

    // --- Draw Detector Box ---
    ctx.lineWidth = 4;
    const detectorX = 430;
    const detectorY = 120;
    const detectorW = 150;
    const detectorH = 110;
    ctx.strokeRect(detectorX, detectorY, detectorW, detectorH);

    // --- Draw Labels ---

    // Particle Labels
    ctx.font = '28px "Times New Roman"';
    // π+
    ctx.fillText('π', 140, 220);
    ctx.font = '20px "Times New Roman"';
    ctx.fillText('+', 153, 210);

    // μ+
    ctx.font = '28px "Times New Roman"';
    ctx.fillText('μ', 325, 220);
    ctx.font = '20px "Times New Roman"';
    ctx.fillText('+', 338, 210);

    // v (neutrino)
    ctx.font = '28px "Times New Roman"';
    ctx.fillText('v', 325, 130);

    // θ (theta)
    ctx.fillText('θ', 305, 160);


    // Detector Label
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('neutrino', detectorX + detectorW / 2, detectorY + 40);
    ctx.fillText('detector', detectorX + detectorW / 2, detectorY + 75);

    // Figure Caption
    ctx.font = '22px "Times New Roman"';
    ctx.fillText('Fig. 4.6', 300, 350);

</script>

</body>
</html>